<template>
    <div style="height:80%" class="zhexian">
        <div class="title">每日捐赠总次数</div>
       <div id="zhexian" ></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
 import {
        onMounted,
        ref,
        reactive
    } from 'vue'
    onMounted(()=>{
var chartDom = document.getElementById('zhexian');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
     nameLocation:'middle',
  nameTextStyle:{
      padding:[20,0,0,0],
    fontSize: 16,
            color: '#333'
    },
    name:'日期',
    type: 'category',
    data: ['2021-03-04', '2021-03-05', '2021-03-06', '2021-03-07', '2021-03-08', '2021-03-09', '2021-03-10', '2021-03-11', '2021-03-12', '2021-03-13', '2021-03-14', '2021-03-15', '2021-03-16', '2021-03-17', '2021-03-18', '2021-03-19', '2021-03-20', '2021-03-21', '2021-03-22', '2021-03-23', '2021-03-24', '2021-03-25', '2021-03-26', '2021-03-27', '2021-03-28', '2021-03-29', '2021-03-30', '2021-03-31', '2021-04-01', '2021-04-02', '2021-04-03', '2021-04-04', '2021-04-05', '2021-04-06', '2021-04-07', '2021-04-08', '2021-04-09', '2021-04-10', '2021-04-11', '2021-04-12', '2021-04-13', '2021-04-14', '2021-04-15', '2021-04-16', '2021-04-17', '2021-04-18', '2021-04-19', '2021-04-20', '2021-04-21', '2021-04-22', '2021-04-23', '2021-04-24', '2021-04-25', '2021-04-26', '2021-04-27', '2021-04-28', '2021-04-29', '2021-04-30', '2021-05-01', '2021-05-02', '2021-05-03', '2021-05-04', '2021-05-05', '2021-05-06', '2021-05-07', '2021-05-08', '2021-05-09', '2021-05-10', '2021-05-11', '2021-05-12', '2021-05-13', '2021-05-14', '2021-05-15', '2021-05-16', '2021-05-17', '2021-05-18', '2021-05-19', '2021-05-20', '2021-05-21', '2021-05-22', '2021-05-23', '2021-05-24', '2021-05-25', '2021-05-26', '2021-05-27', '2021-05-28', '2021-05-29', '2021-05-30', '2021-05-31', '2021-06-01', '2021-06-02', '2021-06-03', '2021-06-04', '2021-06-05', '2021-06-06', '2021-06-07', '2021-06-08', '2021-06-09', '2021-06-10', '2021-06-11', '2021-06-12', '2021-06-13', '2021-06-14', '2021-06-15', '2021-06-16', '2021-06-17', '2021-06-18', '2021-06-19', '2021-06-20', '2021-06-21', '2021-06-22', '2021-06-23', '2021-06-24', '2021-06-25', '2021-06-26', '2021-06-27', '2021-06-28', '2021-06-29', '2021-06-30', '2021-07-01', '2021-07-02', '2021-07-03', '2021-07-04', '2021-07-05', '2021-07-06', '2021-07-07']
  },
  yAxis: {
    name:'每日捐赠总次数',
    nameLocation:'center',
     nameTextStyle: {
          padding:[0,0,30,0],
            fontSize: 16,
            color: '#333'
        },
    type: 'value'
  },
    dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 10
    },
    {
      start: 0,
      end: 10
    }
  ],
  series: [
    {
      data: [1728, 2757, 2712, 2912, 2850, 2938, 2758, 3710, 2666, 2805, 2900, 3038, 3112, 3017, 3340, 2711, 3366, 2885, 2854, 2934, 3268, 2740, 2776, 3409, 2649, 2055, 2713, 3053, 3312, 2972, 3210, 3174, 3069, 3524, 3678, 3634, 3219, 3622, 2990, 2877, 3195, 2983, 3508, 3260, 3145, 3361, 2932, 2976, 3526, 2499, 3064, 2489, 2688, 3155, 2662, 2917, 2890, 2381, 2806, 2572, 2817, 1985, 2319, 1488, 2809, 2800, 2781, 3288, 3271, 3393, 3176, 3472, 2593, 3006, 3014, 3002, 2811, 3118, 2881, 2772, 2565, 2818, 3244, 3266, 3197, 3187, 2729, 2180, 3216, 2722, 3682, 2613, 2348, 2371, 2456, 2690, 3097, 3279, 2934, 3065, 2150, 3437, 2959, 2815, 3067, 2645, 2769, 3694, 2602, 2516, 2573, 2703, 2725, 2475, 2637, 2336, 2544, 3204, 2441, 2486, 2149, 2570, 2892, 3307, 2500],
      type: 'line',
      smooth: true
    }
  ]
};

option && myChart.setOption(option);
    })
</script>
<style  scoped>
#zhexian{
    /* border: 1px solid red; */
    flex: 1;
}
.zhexian{
    display: flex;
    flex-direction: column;
}
.title{
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}
</style>